<template>
    <div class="index-wrap">
      <dheader></dheader>
      <!-- offer-step-1 -->
      <div class="dh-container">
        <div class="offer-header">
          <h2>
            <strong>{{params.plateNo}}</strong>
            <strong><i class="layui-icon layui-icon-location"></i>{{params.cityName}}</strong>
            <strong>去年投保</strong>
            <button data-method="notice" id="detail_Modal" class="layui-btn layui-btn-radius layui-btn-normal">详情</button>
          </h2>
          <div class="layui-row dh-row">
            <div class="layui-col-md6" v-if="xubaoInfo.ciInfo">
              <ul>
                <li><h3><strong>交强险</strong><b>{{xubaoInfo.ciInfo.insuranceCompany}}</b></h3></li>
                <li><span>终保日期</span><span>{{xubaoInfo.ciInfo.insuranceEndTime}}</span><b class="money">{{xubaoInfo.ciInfo.totalAmount}}元</b></li>
                <li><span>保单号</span><span>{{xubaoInfo.ciInfo.policyNo}}</span></li>
              </ul>
            </div>
            <div class="layui-col-md6" v-if="xubaoInfo.biInfo">
              <ul>
                <li><h3><strong>商业险</strong><b>{{xubaoInfo.biInfo.insuranceCompany}}</b></h3></li>
                <li><span>终保日期</span><span>2018/09/09</span><b class="money">1,088元</b></li>
                <li><span>保单号</span><span>DF8082075207520752</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="offer-form">
          <form class="layui-form" action="">
            <div class="layui-row form-row">
              <div class="layui-col-md6">
                <h3>基本信息</h3>
                <div class="offer-form-left">
                  <div class="layui-form-item">
                    <label class="layui-form-label">所有人</label>
                    <div class="layui-input-block">
                      <input type="text" name="name" v-model="params.name" lay-verify="required" autocomplete="off" placeholder="输入名称" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">车架号</label>
                    <div class="layui-input-block">
                      <input type="text" name="vehicleFrameNo" v-model="carInfo.vehicleFrameNo" lay-verify="required" autocomplete="off" placeholder="输入车架号" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">品牌型号</label>
                    <div class="layui-input-block">
                      <input type="text" name="standardName" v-model="carInfo.standardName" lay-verify="required" autocomplete="off" placeholder="输入品牌型号" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">发动机号</label>
                    <div class="layui-input-block">
                      <input type="text" name="engineNo" v-model="carInfo.engineNo" lay-verify="required" autocomplete="off" placeholder="输入发动机号" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">注册日期</label>
                    <div class="layui-input-block date-com">
                      <input type="text" readonly="readonly" name="date" id="date" lay-verify="date" placeholder="选择日期" autocomplete="off" class="layui-input">
                      <i class="layui-icon layui-icon-date"></i>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">交强险起保日期</label>
                    <div class="layui-input-block date-com">
                      <input type="text" readonly="readonly" name="date" id="date_1" lay-verify="date" placeholder="选择日期" autocomplete="off" class="layui-input">
                      <i class="layui-icon layui-icon-date"></i>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">商业险起保日期</label>
                    <div class="layui-input-block date-com">
                      <input type="text" readonly="readonly" name="date" id="date_2" lay-verify="date" placeholder="选择日期" autocomplete="off" class="layui-input">
                      <i class="layui-icon layui-icon-date"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <h3>详细信息</h3>
                <div class="offer-form-right">
                  <div class="layui-form-item">
                    <label class="layui-form-label">车辆性质</label>
                    <div class="layui-input-block text-tr">
                      <input type="radio"  name="carYy" value="0" title="非运营" checked="checked">
                      <input type="radio" name="carYy" value="1" title="营运">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">是否过户车</label>
                    <div class="layui-input-block">
                      <div class="layui-input-inline offer-tip">
                        <span>注：过户车(过户后第一次购买车险请开启此按钮)</span>
                      </div>
                      <input type="checkbox" name="close" lay-skin="switch" lay-text="是|否">
                    </div>
                  </div>
                  <div class="layui-form-item" v-if="!this.closeGh">
                    <label class="layui-form-label">过户日期</label>
                    <div class="layui-input-block date-com">
                      <input type="text" readonly="readonly" name="date" id="date_3" lay-verify="date" placeholder="选择日期" autocomplete="off" class="layui-input">
                      <i class="layui-icon layui-icon-date"></i>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">核定载质量(Kg)</label>
                    <div class="layui-input-block">
                      <input type="text" v-model="xubaoInfo.carTypeJson.hdzzl" name="hdzzl" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">整备质量(Kg)</label>
                    <div class="layui-input-block">
                      <input type="text" v-model="xubaoInfo.carTypeJson.zbzl" name="zbzl" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-form-item submit-btn step-btn">
              <button lay-submit="" lay-filter="first" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">下一步</button>
            </div>
          </form>
        </div>
      </div>
    </div>
</template>
<script type="text/ecmascript-6">
  import FuncTools from '../utils/functionTools';
  import dheader from './header';
  import mockHandler from '../mock/handler';
  import {queryXubaoInfo} from '../mock/mock';
  export default {
    name: 'index',
    data () {
      return {
        params: FuncTools.getSession('param'),
        closeGh: !0,
        identity: FuncTools.getSession('identity'),
        carInfo: {
          standardName: '',
          vehicleFrameNo: '',
          engineNo: '',
          ownerName: '',
          boughtTime: '', // 注册日期
          carTypeCode: '',
          carTypeJson: {
            'yy': '0'
          }
        },
        xubaoInfo: {
          carTypeJson: {
            hdzzl: '',
            zbzl: ''
          }
        }
      };
    },
    mounted () {
      const layui = window.layui;
      const that = this;
      this.carInfo.ownerName = this.params.name;
      this.carInfo.carTypeCode = this.params.carTypeCode;
      this.params.carYy = '0';
      this.getXubao().then((res) => {
        if (res.code === 'success') {
          this.xubaoInfo = Object.assign({}, this.xubaoInfo, res.data);
          this.carInfo = Object.assign({}, this.cardInfo, this.xubaoInfo.carInfo);
          this.carInfo.boughtTime && (this.carInfo.boughtTime = FuncTools.transferDate(this.carInfo.boughtTime * 1e3));
          this.xubaoInfo.carInfo && (this.xubaoInfo.carTypeJson = Object.assign({}, this.xubaoInfo.carTypeJson, this.xubaoInfo.carInfo.carTypeJson));
          this.params['jqQbTime'] = this.xubaoInfo.jqQbTime;
          this.params['syQbTime'] = this.xubaoInfo.syQbTime;
        }
        this.$nextTick(() => {
          layui.use(['form', 'laydate', 'layer'], () => {
            const [form, laydate, layer] = [layui.form, layui.laydate, layui.layer];
            laydate.render({
              elem: '#date',
              value: this.xubaoInfo.registerTime,
              done: (val) => {
                this.carInfo.boughtTime = val;
              }
            });
            laydate.render({
              elem: '#date_1',
              value: this.xubaoInfo.jqQbTime,
              done: (val) => {
                this.params['jqQbTime'] = val;
              }
            });
            laydate.render({
              elem: '#date_2',
              value: this.xubaoInfo.syQbTime,
              done: (val) => {
                this.params['syQbTime'] = val;
              }
            });
            laydate.render({
              elem: '#date_3',
              done: (val) => {
                this.params['transferTime'] = val;
              }
            });

            form.on('radio', function (data) {
              that.params['carYy'] = data.value;
              that.carInfo.carTypeJson.yy = data.value;
            });

            form.on('switch', function (data) {
              that.closeGh = !data.elem.checked;
              that.closeGh && that.params.transferTime && (delete that.params.transferTime);
            });

            form.render();

            const $ = layui.jquery;
            const ciInfo = this.xubaoInfo.ciInfo && this.xubaoInfo.ciInfo.insurances;
            let cilist = '';
            if (ciInfo) {
              for (let ins of ciInfo) {
                cilist += `<p><span>${ins.insuranceName}</span><span>${ins.quotesPrice}元</span></p>`;
              }
            }
            const ciHtml = ciInfo ? `<div class="modal-val">${cilist}</div>`
              : '<div class="modal-val">暂无信息</div>';
            const biInfo = this.xubaoInfo.biInfo && this.xubaoInfo.biInfo.insurances;
            let bilist = '';
            if (biInfo) {
              for (let ins of biInfo) {
                bilist += `<p><span>${ins.insuranceName}</span><span>${ins.quotesPrice}元</span></p>`;
              }
            }
            const biHtml = biInfo ? `<div class="modal-val">${bilist}</div>` : '<div class="modal-val">暂无信息</div>';
            const active = {
              notice: () => {
                // 示范一个公告层
                layer.open({
                  type: 1,
                  title: false, // 不显示标题栏
                  closeBtn: true,
                  area: '470px',
                  shade: 0.8,
                  id: 'LAY_layuipro', // 设定一个id，防止重复弹出
                  btnAlign: 'c',
                  moveType: 1, // 拖拽模式，0或者1
                  content: '<div class="modal-content"' +
                  '><h3>去年投保详情</h3>' +
                  '<div class="modal-item">' +
                  '<label>交强险</label>' + ciHtml +
                  '</div>' +
                  '<div class="modal-item"><label>商业险</label>' + biHtml + '</div></div>'
                });
              }
            };

            $('#detail_Modal').on('click', function () {
              const othis = $(this);
              const method = othis.data('method');
              return active[method] ? active[method].call(this, othis) : '';
            });

            form.on('submit(first)', () => {
              console.log(this.carInfo);
              console.log(this.params);
              this.params['carInfo'] = this.carInfo;
              this.params['xubaoInfo'] = this.xubaoInfo;
              FuncTools.setSession('param', this.params);
              this.goNext();
              return false;
            });
          });
        })
      });
    },
    methods: {
      goNext () {
        this.$router.push({
          path: 'offer'
        });
      },
      getXubao () {
        return mockHandler(queryXubaoInfo, Object.assign(this.identity, {
          city: this.params.city,
          plateNo: this.params.plateNo,
          name: this.params.name,
          carTypeCode: this.params.carTypeCode
        }));
      }
    },
    components: {
      dheader
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">

</style>
